<template>
    <view class="">
        <!-- #ifdef MP-WEIXIN --> 
        <top-nav :inner-title="title" is-show-back="true" is-fixed="true" :navH="navH" :n="n" is-white="bg-white" opacity="1"></top-nav>
        <view :style="{height: navH +'px'}"></view>
        <!-- #endif -->
        <view class="scroll">
            <view class="top_title">可用红包（{{useful.length}}）</view>

            <view class="packet" v-for="(item,index) in useful" :key="index" :class="item.id == checkedId ? 'checked' : 'unChecked'" @click="choosePacket($event)" :data-val="item.reduction" :data-id="item.id">
                <view class="packet_top">
                    <view class="radius left">
                        <view class=""></view>
                    </view>
                    <view class="packet_left">
                        <view class="packet_name">{{item.title}}</view>
                        <view class="packet_deadline">有效期至{{item.end_time}}</view>
                    </view>
                    <view class="packet_right">
                        <view class="packet_value">¥<text>{{item.reduction}}</text></view>
                        <view class="packet_require" v-if="item.full>0">满{{item.full}}可用</view>
                        <view class="packet_require" v-else>无门槛使用</view>
                    </view>
                    <view class="radius right">
                        <view class=""></view>
                    </view>
                </view>
                <view class="packet_bottom">
                     <view class="packet_tip">{{item.content}} </view>
                </view>
                <image v-if="item.id == checkedId" class="checked_icon" src="http://img1.birdback.org/a/8c/f7/8cf73a1d746970e30edd7eb62a11a439.png"></image>
            </view>
            <view class="no-more">没有更多可用红包哟～</view>
            
            <view class="top_title">不可用红包（{{useless.length}}）</view>
            <view class="packet useless" v-for="(item,index) in useless" :key="index">
                <view class="packet_top">
                    <view class="radius left">
                        <view class=""></view>
                    </view>
                    <view class="packet_left">
                        <view class="packet_name">{{item.title}}</view>
                        <view class="packet_deadline">有效期至{{item.end_time}}</view>
                    </view>
                    <view class="packet_right">
                        <view class="packet_value">¥<text>{{item.reduction}}</text></view>
                        <view class="packet_require">满{{item.full}}可用</view>
                    </view>
                    <view class="radius right">
                        <view class=""></view>
                    </view>
                </view>
                <view class="packet_bottom">
                    <view class="packet_tip"> {{item.content}} </view>
                </view>
                <view class="useless_reason">
                    <view class="red_text">本单不可用原因</view>
                    <view class="packet_tip">{{item.reason}} </view>
                </view>
            </view>
            <view class="no-more">没有更多不可用红包哟～</view>
        </view>
    </view>
</template>

<script>
    import uniFly    from 'unifly';
	import request   from '../../../common/request.js';
	import $api_base from '../../../api/api_base.js';
	import topNav    from '@/template/topnav/index.vue';
	import event     from '../../../common/event.js';
	export default {
		components: { topNav },
		data() {
			return {
				navH: 0,
				n: 0,
				title:'选择红包',
                checkedId:0,
                useful:[],
                useless:[]
			}
		},
		onLoad: function (options) {
			this.navH	  = getApp().globalData.navHeight;
			this.n		  = getApp().globalData.n;
            let pages     = getCurrentPages();
            let prevPage  = pages[pages.length - 2];
            this.useful   = prevPage.$vm.useful;
            this.useless  = prevPage.$vm.useless;
            this.checkedId= prevPage.$vm.r_id;
            prevPage.$vm.fromPage = 'packet';
            if(prevPage.$vm.storeInfo.red_count>2){
                uni.showToast({
                    title:"今日红包已使用三次，明天再来~"
                })
            }
		},
		methods:{
			choosePacket:function(e){
                console.log(e);
                var val = e.currentTarget.dataset.val;
                var id  = e.currentTarget.dataset.id;
                let pages = getCurrentPages();
                let prevPage = pages[pages.length - 2];
                if(this.checkedId == id){
                    this.checkedId = 0;  
                    prevPage.$vm.packet_val = 0;
                    prevPage.$vm.r_id = '';                   
                }else{
                    this.checkedId = id;
                    prevPage.$vm.packet_val = val;
                    prevPage.$vm.r_id = this.checkedId;
                }
                setTimeout(function(){
                    uni.navigateBack();
                },300) 
            }
		}
	}
</script>
<style>
  page {
  background-color: #f9f9f9;
  }
</style>
<style lang="scss" scoped>
	@import 'index.scss';
</style>
<style lang="scss" scoped>
	@import '../../../pages/red-packet/index.scss';
</style>
